<template>
  <div class="navbar-com navbar-main">
    <router-link  to="/home" class="logo"><h1>喜阅</h1></router-link>
    <form action="" class="search-box">
      <span class="search-icon"><van-icon name="search" /></span>
      <input @focus="searchfocus" placeholder="搜索" type="text">
    </form>
    <div class="usercenter">
      <router-link :to="{name:'User',params:{logined:$store.state.islogin}}"><van-icon name="user-circle-o" /></router-link>
    </div>
    <div class="cancle" @click="searchcancle">取消</div>
  </div>
</template>

<script>
export default {
  methods:{
    searchfocus(){
      let form = document.querySelector('form.search-box'),
      cancle = document.querySelector('.navbar-main .cancle'),
      user = document.querySelector('.navbar-main .usercenter');
      form.classList.add("on-search")
      cancle.style.display = "block"
      user.style.display = "none"
    },
    searchcancle(){
      let form = document.querySelector('form.search-box'),
      cancle = document.querySelector('.navbar-main .cancle'),
      user = document.querySelector('.navbar-main .usercenter');
      form.classList.remove("on-search")
      cancle.style.display = "none"
      user.style.display = "block"
    },
  },
}
</script>

<style>
.navbar-main{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 15PX;
}
.navbar-main .logo{
  flex:60PX 0 0;
}
.logo h1{
  color:#ff5722;
  font-size: 25PX;
}
.navbar-main .search-box{
  width: 100PX;
  flex: 100PX 0 0;

  height: 30PX;
  box-sizing: border-box;
  background: #f7f7f7;
  padding-left: 5PX;
  border: 1PX solid #dfdfdf;
  border-radius: 15PX;
  transition: .5s;
}
.search-icon{
  position: absolute;
  height: 30PX;
  padding: 5PX 0;
  box-sizing: border-box;
  font-size: 20PX;
  color: #dfdfdf;
}
.search-box input{
  display: block;
  width: 100%;
  font-size: 14PX;
  height: 30PX;
  background: transparent;
  box-sizing: border-box;
  padding: 0 10PX 0 24PX;
  border: 0;
}
.usercenter,.cancle{
  flex: 1;
  color: #a0a0a0;
  margin-left: 15PX;
  text-align: right;
}
.usercenter{
  line-height: 0;
  font-size: 28PX;
}
.usercenter>a{
  color: #a0a0a0;
}
.cancle{
  display: none;
  font-size: 15PX;
}
.on-search{
  flex: 3 0 0 !important;
}
@media screen and (min-width:968PX){
  .cancle,.usercenter{
    cursor: pointer;
  }
}
</style>